<template>
  <div class="userCoreContainer">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="标题" width="200">
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                    <p>作者: {{ scope.row.author.college+' '+scope.row.author.name }}</p>
                    <p>类别: {{ scope.row.category.name }}</p>
                    <div slot="reference" class="name-wrapper imgTitle">
                        <el-tag size="medium">{{ scope.row.videoTitle }}</el-tag>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column label="封面" width="150">
            <template slot-scope="scope">
                <a href="javascript:void(0);" @click="updateImage(scope.row.id,scope.row.videoCoverPic)">
                    <el-image style="width: 100px; height: 120px;" 
                            :src="filePath+scope.row.videoCoverPic" 
                            fit="contain">
                    </el-image>
                </a>
            </template>
        </el-table-column>
        <el-table-column label="点击数" width="120">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.numberOfHits }}</span>
            </template>
        </el-table-column>
        <el-table-column label="上传日期" width="200">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.releaseTime }}</span>
            </template>
        </el-table-column>
        <el-table-column label="是否审核" width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px" class="audio">
                    {{ scope.row.isAudio==0?"未审核":"已审核" }}
                </span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index)">编辑</el-button>
                <el-button size="mini" type="danger" @click="delWin(scope.$index)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 信息修改 -->
    <el-dialog title="信息修改" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="视频标题" :label-width="formLabelWidth">
          <el-input v-model="form.videoTitle" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="视频类别" :label-width="formLabelWidth">
          <el-select v-model="form.videoCategory" placeholder="请选择图片类别">
            <el-option v-for="(category,index) in categorys" :key="index" :label="category.name" :value="category.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="制作人" :label-width="formLabelWidth">
          <el-select v-model="form.videoAuthor" placeholder="请选择图片制作人">
            <el-option v-for="(teacher,index) in teachers" :key="index" :label="teacher.college+' '+teacher.name" :value="teacher.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleModify">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 图片修改 -->
    <el-dialog title="修改图片" :visible.sync="dialogImageVisible">
        <el-upload
            class="upload-demo"
            :action="uploadImageUrl+'?id='+this.now_id+'&videoCoverPic='+this.now_pic"
            :file-list="fileList"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import video_url from './url'
import file_path from './file_url'
export default {
    data(){
        return{
            videoUser: this.$route.query.videoUser,
            dialogFormVisible: false,
            dialogImageVisible: false,
            tableData:[],
            categorys: [],
            teachers:[],
            filePath: file_path[0],
            form: {
                id: 0,
                videoTitle: '',
                videoCategory: '',
                videoAuthor: ''
            },
            formLabelWidth: '120px',
            fileList: [],
            now_id: null,
            now_pic: null,
            uploadImageUrl: video_url[11].url,
            index: 1,
            size: 8,
            total: 0,
        }
    },
    methods:{
        // 修改 - 获取值
        handleEdit(index) {
            this.dialogFormVisible = true;
            // 按照ID查询
            this.$axios({
                url: video_url[6].url+"?id="+this.tableData[index].id,
            }).then(res => {
                this.form = res.data;
                console.log(this.form);
            })
        },
        // 修改图片
        updateImage(id,pic){
            this.fileList = [];
            this.now_id = id;
            this.now_pic = pic
            this.dialogImageVisible = true;
        },
        // 根据用户查询未审核的视频
        queryAllVideosByVideoUser(){
            this.$axios({
                url: video_url[5].url,
                params:{
                    videoUser: this.videoUser,
                    index: this.index,
                }
            }).then(res => {
                this.tableData = res.data;
                console.log(res.data);
            })
        },
        // 查询老师的信息
        getTeachers(){
            this.$axios({
                url: video_url[8].url
            }).then(res => {
                this.teachers = res.data;
            })
        },
        // 添加
        handleModify(){
            this.dialogFormVisible = false;
            console.log(this.form);
            let video = new URLSearchParams();
            video.append("id",this.form.id)
            video.append("videoTitle", this.form.videoTitle);
            video.append("videoCategory", this.form.videoCategory);
            video.append("videoAuthor", this.form.videoAuthor);

            this.$axios({
                url: video_url[12].url,
                params: video
            }).then(res => {
                // 修改成功
                if(res.data > 0){
                    // 查询全部数据
                    this.queryAllVideosByVideoUser();
                }
            })
        },
        // 删除
        handleDelete(index) {
            this.$axios({
                url: video_url[13].url,
                params: {
                    id: this.tableData[index].id,
                    videoFilePath: this.tableData[index].videoFilePath,
                    videoCoverPic: this.tableData[index].videoCoverPic
                }
            }).then(res => {
                // console.log(res);
                // 成功
                // 删除最后一页的最后一项，避免出现空页
                if((this.total-1)%this.size > 0) {
                    if((((this.total-1)/this.size)+1<this.index)&&this.index>=1){
                        this.index--;
                    }
                }else{
                    if(((this.total-1)/this.size<this.index)&&this.index>1){
                        this.index--;
                    }
                }
                this.queryVideoCountByVideoUser();
                this.queryAllVideosByVideoUser();
                this.success("删除成功");
            }).catch((err) => {
                // console.log(err);
                this.error("删除失败!");
            })
        },
        // 弹出 删除询问窗口 确定 调用删除方法
        delWin(index){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.handleDelete(index);
                }).catch(() => {
                this.info("已取消删除");
            });
        },
        queryVideoCountByVideoUser(){
            this.$axios({
                url: video_url[9].url,
            }).then(res => {
                this.total = res.data;
            })
        },
        success(msg){
            this.$message({
                showClose: true,
                message: msg,
                type: 'success'
            });
        },
        error(msg){
            this.$message({
                showClose: true,
                message: msg,
                type: 'error'
            });
        },
        info(msg){
            this.$message({
                showClose: true,
                message: msg,
                type: 'info'
            });
        },
    },
    created(){
        // 初始化total
        this.queryVideoCountByVideoUser();
        // 初始数据
        this.queryAllVideosByVideoUser();
        // 类别选项
        this.$axios({
            url: video_url[7].url,
        }).then(res => {
            this.categorys = res.data;
        })
        // 制作人选项
        this.getTeachers();
    },
    watch:{
        dialogImageVisible(newVal,oldVal){
            if(newVal == false){
                this.queryAllVideosByVideoUser();
            }
        }
    }
}
</script>

<style>

</style>